import type { KeyboardSetType, KeyboardType } from "../types";
import {
    keyKindEnum,
    basicBracketEnum,
    basicEditorEnum,
    basicOperatorEnum,
    quoteBracketEnum,
    quoteEditorEnum,
    quoteOperatorEnum
} from '../enum';

import { createElement } from "../createElement";

/**
 * 
 * @returns keyborart组件
 */
function initKeyBar(): HTMLElement & KeyboardType {
    // 渲染键盘的数据
    const keySet: Array<KeyboardSetType> = [
        { basic: basicEditorEnum.pop, quote: quoteEditorEnum.pop, keyKind: keyKindEnum.pop },
        { basic: basicEditorEnum.clear, quote: quoteEditorEnum.clear, keyKind: keyKindEnum.clear },
        { basic: basicOperatorEnum.surplus, quote: quoteOperatorEnum.surplus, keyKind: keyKindEnum.surplus },
        { basic: basicOperatorEnum.divide, quote: quoteOperatorEnum.divide, keyKind: keyKindEnum.divide },
        { basic: '7', quote: '柒', keyKind: keyKindEnum.seven },
        { basic: '8', quote: '捌', keyKind: keyKindEnum.eight },
        { basic: '9', quote: '玖', keyKind: keyKindEnum.nine },
        { basic: basicOperatorEnum.multiply, quote: quoteOperatorEnum.multiply, keyKind: keyKindEnum.multiply },
        { basic: '4', quote: '肆', keyKind: keyKindEnum.four },
        { basic: '5', quote: '伍', keyKind: keyKindEnum.five },
        { basic: '6', quote: '陆', keyKind: keyKindEnum.six },
        { basic: basicOperatorEnum.minus, quote: quoteOperatorEnum.minus, keyKind: keyKindEnum.minus },
        { basic: '1', quote: '壹', keyKind: keyKindEnum.one },
        { basic: '2', quote: '贰', keyKind: keyKindEnum.two },
        { basic: '3', quote: '叁', keyKind: keyKindEnum.three },
        { basic: basicOperatorEnum.add, quote: quoteOperatorEnum.add, keyKind: keyKindEnum.add },
        { basic: basicBracketEnum.left, quote: quoteBracketEnum.left, keyKind: keyKindEnum.left },
        { basic: basicBracketEnum.right, quote: basicBracketEnum.right, keyKind: keyKindEnum.right },
        { basic: '0', quote: '零', keyKind: keyKindEnum.zoro },
        { basic: '.', quote: '点', keyKind: keyKindEnum.numDot },
        { basic: basicEditorEnum.equal, quote: basicEditorEnum.equal, keyKind: keyKindEnum.equal }
    ];

    const keyBar = createElement('ul');

    // 设置每个按键的自定义属性以及显示的值
    for (let i = 0; i < keySet.length; i++) {
        let keyItem: HTMLElement = createElement('li', {
            'data-type': keySet[i].keyKind
        });
        const innerTextSpan: HTMLElement = createElement('span');

        innerTextSpan.innerText = keySet[i].quote;
        keyItem.appendChild(innerTextSpan);
        keyBar.appendChild(keyItem);
    }

    let appenFn: KeyboardType = {
        isMounted(): boolean {
            return Boolean(keyBar.parentElement)
        }
    }

    return Object.assign(keyBar, appenFn);
}

export { initKeyBar };


